<template>
	<view class="big">
		<view class="top">
			<uni-icons type="locked-filled" size="80"></uni-icons>
			<view style="margin-top: 20rpx;">请先登录</view>
		</view>
		<uni-forms style="margin-top: 50rpx; width: 90%;">
			<view class="example">
				<!-- 基础表单校验 -->
				<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
					<uni-forms-item label="手机号码" label-width="90" required name="mobile">
						<uni-easyinput v-model="valiFormData.mobile" type="number" placeholder="请输入手机号" />
					</uni-forms-item>
					<uni-forms-item label="图片验证码" label-width="90" required name="picCode">
						<uni-easyinput v-model="valiFormData.picCode" validateTrigger="blur" type="text" @change="xytp"
							placeholder="请输入图片验证码" style="width: 60%;" />
							<image :src="images" @click="imgs" mode=""class="image_right canvas-img-code" style="height:50rpx;width: 150rpx;"></image>
					</uni-forms-item>
					<uni-forms-item label="短信验证码" label-width="90" required name="code">
						<uni-easyinput v-model="valiFormData.code" type="number" placeholder="请输入短信验证码"
							style="width:60%" />
						<button class="image_right" type="default" size="mini" @click="yz">获取验证码</button>
					</uni-forms-item>
					<uni-forms-item label="设置密码" label-width="90" required name="pwd">
						<uni-easyinput v-model="valiFormData.pwd" maxlength="16" type="password"
							placeholder="请输入登录密码" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary">立即注册</button>
				<view class="bottom">
					<text @click="fanhui">已有账号？直接登录</text>
				</view>
			</view>

		</uni-forms>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valiFormData: {
					key:""
				},
				verCode: "",
				width: 120,
				images:"",
				height: 45,
				rules: {
					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号'
							},
							{
								minLength: 11,
								maxLength: 11,
								errorMessage: '请输入正确的手机号'
							}
						],
						validateTrigger: "bind"
					},
					picCode: {
						rules: [{
							required: true,
							errorMessage: '请输入图片验证码'
						}],
						validateTrigger: "bind"
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入短信验证码'
						}],
						validateTrigger: "bind"
					},
					pwd: {
						rules: [{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								minLength: 6,
								maxLength: 16,
								errorMessage: '请输入正确的密码'
							}
						],
						validateTrigger: "bind"
					}
				}

			}
		},
		onReady(){
			
		this.imgs()
		},
		watch:{
		   image(newarr,oldarr){
			   console.log(newarr)
			   this.images=newarr
		   }	
		},
		methods: {
			// 图片验证码
			imgs(){
				this.valiFormData.key=new Date().valueOf()
				uni.$u.http.get("verification/pic/get",{
					params:{
						key:this.valiFormData.key
					}
				}).then(() => {
					this.images="https://api.it120.cc/xiaochengxu/verification/pic/get?"+this.valiFormData.key
				})
			},
			// 图片效验
			xytp(){
				uni.$u.http.post("verification/pic/check",this.valiFormData).then(res=>{
					console.log(res)
				})
			},
		   // 短信验证
			yz(){
				// this.valiFormData.key=0.22810016929269783
				console.log(this.valiFormData.mobile)
				uni.$u.http.get("verification/sms/get",{
					params:{
						mobile:this.valiFormData
					}
				}).then(res => {
					console.log(res)
				})
			},
			// 返回登录页
			fanhui() {
				uni.navigateTo({
					url: "../denglu/denglu"
				})
			},
			submit() {
				this.$refs.valiForm.validate().then(res => {
					console.log('表单数据信息：', res);
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			binddata(name, value) {
				// 通过 input 事件设置表单指定 name 的值
				this.$refs.form.setValue(name, value)
			},
			
				
					
		}
	        
			
	}
</script>

<style>
	@import "./new_file.css";
</style>
